<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>日新网 - 问答</title>
    <script src="__PUBLIC__/js/vue.js"></script>
    <style>
        .details_comment .comment1 {
            margin-bottom: .2rem;
        }

        .details_comment .details_comment_item {

            display: block;
        }
        .pic img {
            display: inline-block;
        }

        .short_answer_bor_bottom {
            border-bottom: solid 1px #707070;
        }

        .details_comment .icon_btm span {
            margin-left: 0!important;
        }

        .submit_comment {
            padding: .1rem .2rem;
            background-color: #ff7c42;
            cursor: pointer;
        }

        /*作者信息样式*/
        .expert {
            margin-left: .2rem;
            margin-right: .2rem;
        }
        .details_item {
            background-color: #fff;
        }
        .expert_item .picture_ground {
            margin-top: .08rem;
        }
        .expert .answer_btn {
            float: right;
            margin-top: -1.08rem;
            margin-right: .2rem;
            letter-spacing: 1px;
        }
        .expert .answer_btn a {
            color: #c8161d;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<tc_include file="scripts"/>
<tc_include file="Public:nav"/>


<div class="comWidth details">
    <h3>{$info.post_title}</h3>
    <div class="details_content">
        <p class="text ellipsis6 article_content">{$info.short_content}</p>
        <span id="openItem">展开</span>
    </div>
    <div id="proptom_main">
        <div class="expert">
            <div class="expert_item clearfix">
                <a href="{:U('User/Index/professor_homepage', ['professor_id' => $question_author['id']])}">
                    <div class="picture_ground">
                        <img src="{$question_author.avatar}" alt="">
                    </div>
                    <div class="text">
                        <p class="name">{$question_author.user_nicename}</p>
                        <p class="work"><span class="company_name">{$question_author.company}</span><span>{$question_author.position}</span></p>
                    </div>
                </a>
            </div>
            <p class="answer_btn">
                <a href="{:leuu('Question/Question/add_answer', ['question_id' => $info['id']])}"><span>写回答</span></a>
            </p>
        </div>
        <p class="details_item_title">
            回答:
        </p>
        <div v-for="answer in answer_list" class="details_item clearfix">
            <div>
                <div class="pic" data-show="0" @click="show_hide_answer($event, answer.post_content, answer.post_excerpt)">
                    <img :src="answer.avatar" alt="">
                </div>
                <div class="details_item_bottom">
                    <p class="name" :class="{short_answer_bor_bottom : check_short_answer(answer.post_excerpt)}">
                        <span>{{ answer.post_author_name }}</span>&nbsp;<span class="work">{{ answer.position }}<i>{{ answer.post_date }}</i></span>
                    </p>
                    <div class="details_item_text ellipsis3 article_content">{{ answer.post_excerpt }}</div>

                    <div class="details_comment">
                        <p class="comment1">评论(<span>{{ answer.comment_count }}</span>)
                            <span class="glyphicon glyphicon-comment comment-icon" style="margin-left: 15px;"></span>
                        </p>
                        <ul>
                            <li v-for="comment in answer.comments">
                                <span class="name1 pull-left ellipsis1">{{ comment.full_name }}</span>
                                <div class="details_comment_item">
                                    <p>{{ comment.content }}</p>
                                    <p class="timer">{{ comment.createtime }}
                                        <span class="glyphicon glyphicon-comment replay-icon" style="margin-left: 15px;" :data-comment-id="comment.id" :data-full-name="comment.full_name" :data-uid="comment.uid"></span>
                                    </p>
                                    <ul>
                                        <li v-for="child_comment in comment.children">
                                            <span class="name1 ellipsis1">{{ child_comment.full_name }}</span><span class="maoHao">:</span>
                                            <div class="details_comment_item answers_item">
                                                <p>{{ child_comment.content }}</p>
                                                <p class="timer">{{ child_comment.createtime }}</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                        <p class="icon_btm clearfix">
                            <a :id="answer.id" class="collect pull-right collect-btn" data-href="{:U('user/favorite/do_favorite', ['id' => $info['id'], 'from_id' => $info['post_author']])}"></a>
                            <span class="say">
                            <i class="submit_comment" :data-answer-id="answer.id" :data-comment-id="0" :data-uid="0">发送</i>
                            <input type="text" class="argue_val inputval" placeholder="评论…">
                        </span>
                            <span class="no_agree dislike-answer" :data-answer-id="answer.id" style="cursor:pointer">反对(<i>{{ answer.dislike }}</i>)</span>
                            <span class="agree like-answer" :data-answer-id="answer.id" style="cursor:pointer">赞同(<i>{{ answer.post_like }}</i>)</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="question_layer" style="display: none;">
    <p class="title">同时保有全然相反的两种观念，还能正常行事，是第一流智慧的标志。</p>
    <ul>
        <a data-href="{:U('Question/Question/pay_for_question', ['question_id' => $info[id]])}" class="pay_for_answer">
            <li class="money"><span>资金</span> <br><i>付费查看，需要({$info.question_price})元</i></li>
        </a>
        <a href="JavaScript:;" style="display: none;" >
            <li class="ziyuan"><span>资源</span> <br><i>朋友支持，需要(7)位</i></li>
        </a>
        <a href="{:leuu('Question/Question/add_answer', ['question_id' => $info['id']])}">
            <li class="know"><span>知识</span> <br><i>回答问题，需审核</i></li>
        </a>
    </ul>
    <span class="layer_close"></span>
</div>

<tc_include file="Public:footer"/>

<script>
    $(document).ready(function () {
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            /*window.location.href="你的手机版地址";*/
            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') != -1;
            if (isWeixin) {
                var get_base_info = "{$get_base_info}";
                if (get_base_info) {
                    var redirect_url        = "{:base64_encode(U('Question/Question/question_info', ['id' => $info['id']]))}";
                    window.location.href    = "{:U('Wx/WxLogin/get_wx_user_base_info')}" + "&redirect=" + redirect_url;
                }
            }
        }
    })
</script>
<script>
    // 问题展开效果
    var real_question = '{$info.post_content}';
    var short_question = '{$info.short_content}';
    var show = false;
    $('#openItem').click(function () {
        if (show) {
            show = false;
            $(this).siblings('.article_content').empty();
            $(this).siblings('.article_content').css('overflow', 'hidden');
            $(this).siblings('.article_content').css('height', '1.2rem');
            $(this).siblings('.article_content').html(short_question);
            $('#openItem').html('展开');
        } else {
            show = true;
            $(this).siblings('.article_content').empty();
            $(this).siblings('.article_content').css('overflow', 'inherit');
            $(this).siblings('.article_content').css('height', 'auto');
            $(this).siblings('.article_content').html(real_question);
            $('#openItem').html('收起');
        }
    });

    $(document).delegate('.like-answer', 'click', function () {
        var answer_id = $(this).attr('data-answer-id');
        var _this = this;
        $.get("{:U('Question/Question/like_answer')}", {answer_id : answer_id}, function (data) {
            if (data.status) {
                $(_this).find('i').html(data.data.like_count);
            }
        })
    });

    $(document).delegate('.dislike-answer', 'click', function () {
        var answer_id = $(this).attr('data-answer-id');
        var _this = this;
        $.get("{:U('Question/Question/dislike_answer')}", {answer_id : answer_id}, function (data) {
            if (data.status) {
                $(_this).find('i').html(data.data.dislike_count);
            }
        })
    });

    // 点击评论按钮，则评论该回答
    $(document).delegate('.comment-icon', 'click', function () {
        var input_comment   = $(this).parents('.comment1').siblings('.icon_btm').find('.inputval');
        var submit_comment  = $(this).parents('.comment1').siblings('.icon_btm').find('.submit_comment');
        $(submit_comment).attr('data-comment-id', 0);  // 回复id
        $(submit_comment).attr('data-uid', 0);          // 被回复人id
        $(input_comment).attr('placeholder', "评论 : ").val("");
    });

    // 点击回复按钮，则回复该评论
    $(document).delegate('.replay-icon', 'click', function () {
        var input_comment   = $(this).parents('ul').siblings('.icon_btm').find('.inputval');
        var submit_comment  = $(this).parents('ul').siblings('.icon_btm').find('.submit_comment');
        $(submit_comment).attr('data-comment-id', $(this).attr('data-comment-id'));   // 回复id
        $(submit_comment).attr('data-uid', $(this).attr('data-uid'));                   // 被回复人id
        $(input_comment).attr('placeholder', "回复 " + $(this).attr('data-full-name') + " : ").val("");
    });

    // 发送评论
    $('body').delegate('.submit_comment', 'click', function () {
        var parent_id   = $(this).attr('data-comment-id');
        var answer_id   = $(this).attr('data-answer-id');
        var comment     = $(this).siblings('.inputval').val();
        var to_uid      = $(this).attr('data-uid');

        if (!comment) {
            return;
        }

        $.post("{:U('Question/Question/add_comment')}", {parent_id : parent_id, answer_id : answer_id, comment : comment, to_uid : to_uid}, function (data) {
            if (data.status) {
                // 新对象
                var new_comment_id          = data.data.id;
                var new_item                = new Object();
                new_item[new_comment_id]    = data.data;

                // 添加数据
                if (parent_id == 0) {
                    new_item[new_comment_id]['children'] = new Array();
                    var comments = vm.answer_list[answer_id]['comments'];
                    vm.answer_list[answer_id]['comments'] = Object.assign(new_item, comments);
                } else {
                    var replys = vm.answer_list[answer_id]['comments'][parent_id]['children'];
                    vm.answer_list[answer_id]['comments'][parent_id]['children'] = Object.assign(new_item, replys);
                }

                // 情况输入框
                $('.inputval').val('');
            }
        })
    });

    // 关闭弹框
    $(".layer_close").click(function () {
        $(".question_layer").fadeOut();
    });

    $('body').delegate('.pay_for_answer', 'click', function () {
        var url         = $(this).attr('data-href');
        var ua          = navigator.userAgent.toLowerCase();
        var isWeixin    = ua.indexOf('micromessenger') != -1;
        if (isWeixin) {
            callpay();
        } else {
            $.get(url, {pay_type : 2}, function (re) {
                if (re.status) {
                    window.location.href = re.pay_url;
                } else {
                    layer.msg(re.info);
                }
            })
        }
    });

    function callpay()
    {
        var url = $('.pay_for_answer').attr('data-href');
        window.location.href = url + "&pay_type=3";
    }
</script>

<script>
    // 后台传的数据
    var can_read_answer = "{$can_read_answer}";
    var answer_list     = <?php echo json_encode($answers_list);?>;
    var vm = new Vue({
        el      : "#proptom_main",
        data    : {
            answer_list : answer_list
        },
        methods : {
            check_short_answer : function (e) {
                return !(e == null || e == '');
            },
            show_hide_answer : function (e, post_content, short_answer) {
                if (can_read_answer == 0) {
                    $(".question_layer").fadeIn();
                    return;
                }
                // 展开/收起 答案
                var ele = e.currentTarget;
                var show_data = $(ele).attr('data-show');
                var content = $(ele).siblings('.details_item_bottom').find('.article_content');
                if (show_data > 0) {
                    $(ele).attr('data-show', '0');
                    $(content).html(short_answer);
                    $(content).addClass('ellipsis3');
                    $(content).css('overflow', 'hidden');
                    $(content).css('height', '.55rem');
                    $(ele).siblings('.details_item_bottom').find('.details_comment').hide();
                } else {
                    $(ele).attr('data-show', '1');
                    $(content).html(post_content);
                    $(content).removeClass('ellipsis3');
                    $(content).css('overflow', 'inherit');
                    $(content).css('height', 'auto');
                    $(ele).siblings('.details_item_bottom').find('.details_comment').show();
                }
            }
        }
    });
</script>

<!--微信分享-->
<script src="__PUBLIC__/js/wx/jweixin-1.4.0.js"></script>
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: '{$signPackage.appId}',
        timestamp: '{$signPackage.timestamp}',
        nonceStr: '{$signPackage.nonceStr}',
        signature: '{$signPackage.signature}',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'checkJsApi',
            'onMenuShareAppMessage',
            'onMenuShareTimeline'
        ]
    });

    //完成wx.config，执行这里
    wx.ready(function () {

        wx.checkJsApi({
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        });

        var data = {
            title: "日新网 - 问答",
            desc: '{$info.post_title}',
            link: window.location.href,
            imgUrl: 'http://' + "{$DOMAIN_NAME}" + '/themes/simplebootx/Public/assets/images/logo.png',
        }

        //分享给朋友
        wx.onMenuShareAppMessage(data);
        //分享到朋友圈
        wx.onMenuShareTimeline(data);
    });
</script>
</body>
</html>